<template>
  <div class="home">
    <el-container>
      <el-header class="header">
        <div class="header-left">
          <i class="iconfont icon-dengpao tubiao" @click="toHome"></i>
          <div class="webIcon" @click="toHome">
            <img src="../../assets/image/shopIconDemo.jpg" alt="" />
          </div>
        </div>
        <div class="header-center">
          <el-input
            size="large"
            placeholder="输入关键字搜索"
            clearable
            v-model="searchKey"
          />
          <el-button @click="searchbtn">搜索</el-button>
        </div>
        <div class="header-right">
          <el-tooltip content="菜单">
            <i class="iconfont icon-caidan tubiao" @click="drawerM = true"></i>
          </el-tooltip>
          <el-tooltip content="购物车">
            <el-badge :value="cartLength" class="item">
              <i
                class="iconfont icon-gouwuche-tianchong tubiao"
                @click="MyCartBtn"
              ></i>
            </el-badge>
          </el-tooltip>
          <el-popover placement="bottom" :width="80" trigger="hover" title="">
            <template #reference>
              <i class="iconfont icon-gerenfill tubiao" @click="generyBtn"></i>
            </template>
            <div v-if="isShow" class="noLogin" @click="loginBtn">
              亲，请先登录！
            </div>
            <div v-if="!isShow" class="loginx">
              <span @click="generyBtn">个人中心</span>
              <span @click="backLogin">退出</span>
            </div>
          </el-popover>
        </div>
      </el-header>
    </el-container>
    <el-drawer
      title=""
      v-model="drawerM"
      :direction="direction"
      :before-close="handleClose"
      destroy-on-close
      size="20%"
    >
      <div class="sideLayout2">
        <div class="linkItem" v-for="item in MenuList" :key="item.id">
          <el-link
            :underline="false"
            :style="sideLayout"
            @click="toPage(item.src)"
            >{{ item.text }}</el-link
          >
        </div>
      </div>
    </el-drawer>
    <el-drawer
      title="购物车"
      v-model="drawerC"
      :direction="direction"
      :before-close="handleClose"
      destroy-on-close
      size="25%"
    >
      <div class="cartListMin">
        <div class="cartListBoxd" v-for="item in cartList" :key="item">
          <div class="left">
            <div class="imgBox">
              <img class="img" :src="item.defaultImage" alt="" />
            </div>
            <div class="textBox">
              <div class="goodName">{{ item.skuName }}</div>
              <div class="price">{{ item.quantity }}×￥{{ item.price }}.00</div>
            </div>
          </div>
          <div class="close">
            <i
              class="drop iconfont icon-fork"
              @click="dropListItem(item.serialNo)"
            ></i>
          </div>
        </div>
        <div class="totalPrice">
          <span class="text">总值:&nbsp;</span>
          <span class="totalPriceValue">￥{{ totalPrice }}</span>
        </div>
        <div class="checkoutBtn" @click="toMyCart(totalPrice)">查看详情</div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { Search } from "@element-plus/icons-vue";
import { getToken, removeToken } from "@/utils/auth";
import { cartInfoList, removeCartInfo } from "@/api/user";
export default {
  name: "HomeView",
  data() {
    return {
      cartLength: 0,
      isShow: true,
      searchKey: "",
      drawerG: false,
      drawerC: false,
      drawerM: false,
      direction: "rtl",
      MenuList: [
        { text: "主页", src: "/home" },
        { text: "商品", src: "/shop" },
        { text: "关于我们", src: "/about" },
        { text: "我们团队", src: "/team" },
        { text: "博客", src: "/blog" },
        { text: "联系我们", src: "/contact" },
      ],
      cartList: [],
      totalPrice: 0,
    };
  },
  mounted() {
    this.init();
    this.initLoginIcon();
  },
  methods: {
    init() {
      let cartLength = sessionStorage.getItem("cartLength");
      if (cartLength) {
        this.cartLength = cartLength;
      } else {
        this.cartLength = 0;
      }
    },
    handleClose(done) {
      done();
    },
    // 实现个人中心与登录的切换
    initLoginIcon() {
      let token = getToken();
      if (token) {
        this.isShow = !this.isShow;
      } else {
        this.isShow = true;
      }
    },
    toPage(src) {
      console.log(src);
      this.$router.push({ path: src });
    },
    // 删除购物车内容
    dropListItem(serialNo) {
      let msg = "你确定要将该物品移除购物车吗?";
      // 弹出一个框，用来提示用户是否确定删除
      this.$confirm(msg, "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          removeCartInfo([serialNo]).then((res) => {
            if (res.code === 0) {
              this.$message.success("删除成功");
              this.getCartInfoList();
            }
          });
        })
        .catch(() => {
          console.log("cancel");
        });
    },
    toMyCart(total) {
      console.log(total);
      this.$router.push("/cart");
    },
    // 注册界面
    loginBtn() {
      this.$router.push("/login");
    },
    generyBtn() {
      this.$router.push("/personalInfo");
    },
    MyCartBtn() {
      let token = getToken();
      if (token) {
        this.drawerC = !this.drawerC;
        this.getCartInfoList();
        this.cartList.forEach((item) => {
          this.totalPrice += item.price;
        });
      } else {
        this.$router.push("/login");
      }
    },
    // 退出登录
    backLogin() {
      removeToken();
      this.isShow = !this.isShow;
      this.init();
    },
    toHome() {
      this.$router.push("/home");
    },
    searchbtn() {
      if (this.searchKey == "") {
        this.$message.error("先输入关键字");
        return false;
      }
      this.$router.push({
        name: "shop",
        params: { searchKey: this.searchKey },
      });
    },
    // 获取购物车列表
    getCartInfoList() {
      cartInfoList().then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.cartList = res.page.list;
          sessionStorage.setItem("cartLength", this.cartList.length);
          this.cartLength = this.cartList.length;
        }
      });
    },
  },
  components: {},
  computed: {},
  setup() {
    return {
      Search,
    };
  },
};
</script>
<style lang="scss">
.home {
  .el-container {
    .el-header {
      height: 70px;
      padding: 20px;
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      background: #f6fbf6;
      display: flex;
      align-items: center;
      .header-left {
        display: flex;
        align-items: center;
        width: 33.3%;
        padding-left: 100px;
        height: 100%;
        i {
          margin: 0 10px;
          font-size: 30px !important;
        }
        .webIcon {
          height: 40px;
          width: 110px;
          img {
            height: 100%;
            width: 100%;
          }
        }
      }
      .header-center {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: flex-end;
        width: 33.3%;
        .el-input {
          width: 500px;
          .el-input__wrapper {
            border-radius: 30px;
            width: 450px;
          }
        }
        .el-button {
          position: absolute;
          right: 0;
          display: flex;
          background-color: #244d4d;
          color: #fff;
          font-weight: 700;
          margin-left: 5px;
          border-radius: 20px;
          height: 40px;
          width: 60px;
          &:hover {
            background-color: #fff;
            color: #244d4d;
          }
        }
      }
      .header-right {
        display: flex;
        align-items: center;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        width: 33.3%;
        padding-right: 100px;
        i {
          margin: 0 20px;
          font-size: 30px !important;
        }
      }
    }
  }
  .el-drawer {
    .sideLayout2 {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      .linkItem {
        margin: 20px 0;
        .el-link {
          font-size: 24px;
        }
      }
    }
    .cartListMin {
      display: flex;
      flex-direction: column;
      justify-content: center;
      .cartListBoxd {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        .left {
          display: flex;
          align-items: center;
          .imgBox {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px 20px 0 0;
            img {
              height: 80px;
              width: 80px;
            }
          }
          .textBox {
            display: flex;
            flex-direction: column;
            margin: 0 20px 0 0;
            .goodName {
              font-size: 14px;
              color: #244d4d;
              font-weight: bold;
              margin-bottom: 15px;
            }
            .price {
              color: #779;
              font-size: 14px;
            }
          }
        }
        .close {
          display: flex;
          height: 60px;
          align-items: flex-start;
          .drop {
            font-size: 18px !important;
            font-weight: bold;
          }
        }
      }
      .totalPrice {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        font-weight: bold;
        margin: 20px 0;
        .text {
          color: #779;
        }
        .totalPriceValue {
          color: #244d4d;
        }
      }
      .checkoutBtn {
        width: 200px;
        height: 40px;
        background-color: #244d4d;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: bold;
        margin: 0 60px;
        cursor: pointer;
      }
    }
  }
}
.el-popover {
  border-radius: 20px;
  .noLogin {
    cursor: pointer;
    display: flex;
    font-size: 13px;
    justify-content: center;
    padding: 10px 0;
    border-radius: 5px;
    &:hover {
      font-weight: 700;
    }
  }
  .loginx {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    span {
      cursor: pointer;
      width: 120px;
      display: flex;
      flex-direction: column;
      font-size: 13px;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      margin: 5px 0;
      &:hover {
        font-weight: 700;
      }
    }
  }
}
</style>
